<template>
  <!-- 科室费详情 -->
        <!-- {
        text: '导出',
        type: 'info',
        icon: 'export',
        trigger: 'export',
      }, -->
  <Drawer
    title="详情"
    :visible="deptVisible"
    :header-color="'#e7ecf8'"
    width="70%"
    :footer-btns="[
      {
        text: '取消',
        type: 'info',
        trigger: 'cancel',
      },
    ]"
    @cancel="cancel"
    @print="print"
    @export="exportBtn"
  >
    <div class="drawer-box">
      <div class="box-title">科室代码</div>
      <div class="box-table">
        <el-table
          ref="tableref"
          v-loading="tableLoading"
          :data="tableData"
          border
          :header-cell-style="{ background: '#fafafa', borderColor: '#e7ecf8',textAlign:'center' }"
          header-row-class-name="ck-table-header"
          row-class-name="ck-table-row"
          size="small"
          row-key="code"
          height="100%"
          show-summary
          :summary-method="getSummaries"
        >
          <el-table-column
            align="center"
            type="index"
            label="序号"
            width="60"
          />
          <el-table-column  label="科室代码" prop="deptCode">
            <!-- <template slot-scope="scope">
              <div class="text-btn" @click="handleDept(scope.row)">
               {{ scope.row.deptCode ==='AAAAAAAAAA'?'9999': scope.row.deptCode}}
              </div>
            </template> -->
          </el-table-column>
          <el-table-column prop="deptName" label="科室名称" />
          <el-table-column label="人员经费" prop="personnel" align="right">
            <template slot-scope="scope">
              <div class="text-btn" @click="handleDept(scope.row)">
                {{ scope.row.personnel | numberToCurrency }}
                
              </div>
            </template>
          </el-table-column>
          <el-table-column label="药品费" prop="drug" align="right">
            <template slot-scope="scope">
              <div class="text-btn" @click="handleksYp(scope.row)">
                {{ scope.row.drug |numberToCurrency }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="卫生材料费" prop="sanitaryMaterials" align="right">
            <template slot-scope="scope">
              <div class="text-btn" @click="handleDeptWscl(scope.row)">
                {{ scope.row.sanitaryMaterials |numberToCurrency }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="固定资产折旧费" prop="fixed" align="right">
            <template slot-scope="scope">
              <div class="text-btn">
                {{ scope.row.fixed  |numberToCurrency}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="无形资产摊销" prop="intangible" align="right">
            <template slot-scope="scope">
              <div class="text-btn">
                {{ scope.row.intangible |numberToCurrency }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="提取医疗风险基金" prop="risk" align="right">
            <template slot-scope="scope">
              <div class="text-btn">
                {{ scope.row.risk  |numberToCurrency}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="其他费用" prop="other" align="right">
            <template slot-scope="scope">
              <div class="text-btn" @click="handleDeptOther(scope.row)">
                {{ scope.row.other  |numberToCurrency}}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="sum" label="总计"  align="right">
            <template slot-scope="scope">
               {{ scope.row.sum  |numberToCurrency}}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 药品费 -->
    <DrugCostDetails
      v-if="deptYpVisible"
      :DrugCostDetailsVisible="deptYpVisible"
      :tableDrugData="tableDrugData"
      @drugCostDetails="handleKsypfy"
    />

    <!-- 人员经费-科室 -->
    <childDeptJF
      v-if="childJfVisible"
      :deptVisible="childJfVisible"
      @handleCoseDept="handleChildJf"
      :tableDataList="rjdeptTable"
    ></childDeptJF>

    <!-- 其他费用 -->
    <OtherExpensesDetails
      v-if="deptOtherVisible"
      :other-expenses-details-visible="deptOtherVisible"
      :tableOtherData="tableOtherData"
      @otherExpensesDetails="otherExpensesDetails"
    />
    <!-- 卫生材料费 -->
    <Wsclfee
      v-if="deptWsclVisible"
      :wsclVisible="deptWsclVisible"
      :tableWsclData="tableWsclData"
      @handleCloseWS="handleCloseWS"
    />
  </Drawer>
</template>
<script>
import {
  listBaseCostByPDeptCode,
  listDrugCostByDeptCode,
  listSalaryByPDeptCodeAndDeptCode,
} from "@/utils/apis/report";
import DrugCostDetails from "../perMonthDrawer/DrugCostDetails.vue";
import OtherExpensesDetails from "../perMonthDrawer/OtherExpensesDetails.vue";
import Wsclfee from "../perMonthDrawer/wsclfee.vue";
import ChildDeptJF from "../perMonthDrawer/childDeptJF.vue";
export default {
  props: {
    // 接收父组件传来的值
    deptVisible: Boolean,
  },
  components: {
    DrugCostDetails,
    OtherExpensesDetails,
    Wsclfee,
    ChildDeptJF,
  },
  data() {
    return {
      rjdeptTable: [],
      childJfVisible: false,
      total: 0,
      pageSize: 20,
      currentPage: 1,
      tableData: [],
      tableLoading: false,
      deptYpVisible: false,
      tableDrugData: [],
      tableOtherData: [],
      deptOtherVisible: false,
      deptWsclVisible: false,
      tableWsclData: [],
    };
  },
  inject: ["tableRoot"],
  mounted() {
    this.getData();
  },
  methods: {
    // 科室代码
    handleDept(row) {
      console.log("row", row);
      this.childJfVisible = true;
      const date = this.tableRoot.newParamList.yearMonth
      // const year =
      //   this.tableRoot.newParamList.yearMonth &&
      //   this.tableRoot.newParamList.yearMonth.substr(0, 4);
      // const month =
      //   this.tableRoot.newParamList.yearMonth &&
      //   this.tableRoot.newParamList.yearMonth.substr(5);
      let param = {
        // month: month,
        // year: year,
        yard: "1",
        starYear: this.$moment(date[0]).format('YYYY'),
        endYear: this.$moment(date[1]).format('YYYY'),
        starMonth: this.$moment(date[0]).format('MM'),
        endMonth: this.$moment(date[1]).format('MM'),
      };
      listSalaryByPDeptCodeAndDeptCode(
        param,
        this.tableRoot.deptCode,
        row.deptCode
      ).then((res) => {
        if (res.data.code === 200) {
          this.rjdeptTable = res.data.data;
        }
      });
    },
    handleChildJf(item) {
      this.childJfVisible = item.deptVisible;
    },
    handleCloseWS(res) {
      this.deptWsclVisible = res.wsclVisible;
    },
    handleDeptWscl(row) {
      this.deptWsclVisible = true;
      const date = this.tableRoot.newParamList.yearMonth
      // const year =
      //   this.tableRoot.newParamList.yearMonth &&
      //   this.tableRoot.newParamList.yearMonth.substr(0, 4);
      // const month =
      //   this.tableRoot.newParamList.yearMonth &&
      //   this.tableRoot.newParamList.yearMonth.substr(5);
      let param = {
        // month: month,
        // year: year,
        yard: "1",
        unitCode: "102",
        starYear: this.$moment(date[0]).format('YYYY'),
        endYear: this.$moment(date[1]).format('YYYY'),
        starMonth: this.$moment(date[0]).format('MM'),
        endMonth: this.$moment(date[1]).format('MM'),
      };
      listDrugCostByDeptCode(param, row.deptCode).then((res) => {
        if (res.data.code === 200) {
          this.tableWsclData = res.data.data;
        }
      });
    },
    otherExpensesDetails(params) {
      this.deptOtherVisible = params.otherExpensesDetailsVisible;
    },
    handleDeptOther(row) {
      //其他费用
      this.deptOtherVisible = true;
      const date = this.tableRoot.newParamList.yearMonth
      // const year =
      //   this.tableRoot.newParamList.yearMonth &&
      //   this.tableRoot.newParamList.yearMonth.substr(0, 4);
      // const month =
      //   this.tableRoot.newParamList.yearMonth &&
      //   this.tableRoot.newParamList.yearMonth.substr(5);
      let param = {
        // month: month,
        // year: year,
        yard: "1",
        unitCode: "107",
        starYear: this.$moment(date[0]).format('YYYY'),
        endYear: this.$moment(date[1]).format('YYYY'),
        starMonth: this.$moment(date[0]).format('MM'),
        endMonth: this.$moment(date[1]).format('MM'),
      };
      listDrugCostByDeptCode(param, row.deptCode).then((res) => {
        if (res.data.code === 200) {
          this.tableOtherData = res.data.data;
        }
      });
    },
    handleKsypfy(res) {
      this.deptYpVisible = res.drugCostDetailsVisible;
    },
    handleksYp(row) {
      //药品费
      this.deptYpVisible = true;
      const date = this.tableRoot.newParamList.yearMonth
      // const year =
      //   this.tableRoot.newParamList.yearMonth &&
      //   this.tableRoot.newParamList.yearMonth.substr(0, 4);
      // const month =
      //   this.tableRoot.newParamList.yearMonth &&
      //   this.tableRoot.newParamList.yearMonth.substr(5);
      let param = {
        month: month,
        yard: "1",
        year: year,
        unitCode: "103",
        starYear: this.$moment(date[0]).format('YYYY'),
        endYear: this.$moment(date[1]).format('YYYY'),
        starMonth: this.$moment(date[0]).format('MM'),
        endMonth: this.$moment(date[1]).format('MM'),
      };
      listDrugCostByDeptCode(param, row.deptCode).then((res) => {
        if (res.data.code === 200) {
          this.tableDrugData = res.data.data;
        }
      });
    },
    getData() {
      const date = this.tableRoot.newParamList.yearMonth
      // const year =
      //   this.tableRoot.newParamList.yearMonth &&
      //   this.tableRoot.newParamList.yearMonth.substr(0, 4);
      // const month =
      //   this.tableRoot.newParamList.yearMonth &&
      //   this.tableRoot.newParamList.yearMonth.substr(5);
      let param = {
        month: month,
        yard: "1",
        year: year,
        starYear: this.$moment(date[0]).format('YYYY'),
        endYear: this.$moment(date[1]).format('YYYY'),
        starMonth: this.$moment(date[0]).format('MM'),
        endMonth: this.$moment(date[1]).format('MM')
      };
      this.tableLoading = true;
      listBaseCostByPDeptCode(param, this.tableRoot.deptCode).then((res) => {
        if (res.data.code === 200) {
          this.tableLoading = false;
          this.tableData = res.data.data;
        }
      });
    },
    // 关闭抽屉
    cancel() {
      this.$emit("handleCoseDept", { deptVisible: false });
    },
    // 导出
    exportBtn() {
      console.log("导出");
    },
    // 打印
    print() {
      console.log("打印");
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.pageNum = val;
    },
    // 指定列求和
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总计";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (index >= 3) {
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] = sums[index].toFixed(2);
            // sums[index] += " 元";
          } else {
            sums[index] = "N/A";
          }
        }
      });
      return sums;
    },
  },
};
</script>
<style lang="less" scoped>
.el-table--mini,
.el-table--small,
.el-table__expand-icon {
  font-size: 14px !important;
}

.ck-table-header {
  th {
    background: #fafafa !important;
    height: 48px;
    color: #555555 !important;
  }
}
.pagenation-box {
  display: flex;
  padding-top: 2px;
  justify-content: flex-end;
}
.drawer-box {
  height: 100%;
}
.box-title {
  height: 44px;
  background: #f6f9fe;
  border-bottom: 1px solid #e7ecf8;
  font-size: 16px;
  color: #555555;
  line-height: 44px;
  padding-left: 10px;
  box-sizing: border-box;
}
.box-table {
  padding: 14px 10px 14px 10px;
  height: calc(100% - 78px);
  box-sizing: border-box;
}
.text-btn {
  color: #2165f9;
  border-bottom: 1px solid #2165f9;
  display: inline-block !important;
  cursor: pointer;
}
</style>
